<template>
  <div>
     <div v-show="scene==0">欢迎来到红浪漫</div>
     <div v-show='scene==1'>正在加载中....</div>
    <div class="row" v-show="scene==2">
      <div class="card" v-for="(user, index) in list" :key="user.id">
        <a :href="user.url" target="_blank">
          <img :src="user.avatar_url" style="width: 100px" />
        </a>
        <p class="card-text">{{ user.login }}</p>
      </div>
    </div>
    <div v-show='scene==3'>404</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      //存储服务器返回的数据
      list: [],
      scene:0,//0 欢迎来到红浪漫  1 正在加载  2加载成功  3 404
    };
  },
  mounted() {
    //接受兄弟组件传递的数据
    this.$bus.$on("userName", async (params) => {
       //发送请求之前
       this.scene = 1;
      //函数写法
      try {
        let result = await axios({
          url: "https://api.github.com/search/users?q=" + params,
          method: "get",
        });
        if (result.status == 200) this.list = result.data.items;
        //服务器的数据返回成功
        this.scene = 2;
      } catch (error) {
        //失败的时候404
        this.scene = 3;
      }
    });
  },
};
</script>

<style scoped>
</style>
